<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷狗网页设计</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/KUGOU.css">
    <link rel="stylesheet" href="css/music.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/KUGOU.js"></script>
    <script src="js/iconfont.js"></script>
</head>
<body>
<!-- 头部 -->
<header>
    <!-- logo引入 -->
    <div class="logo">
            <a href="#" title="酷狗音乐"><img src="images/logo.png" alt=""></a>
    </div>
    <!-- 第二个盒子 搜索框 -->
    <div class="search-box">
        <label>
            <input type="search" placeholder="Billie Eilish、Justin Bieber bad guy">
        </label>
        <!-- 放大镜图标 -->
        <i class="iconfont icon-fangdajing on"></i>
    </div>
    <!-- 第三个盒子 -->
    <nav class="nav1">
        <a target="_blank" href="#">客服中心</a>
        <a target="_blank" href="#">招贤纳士</a>
        <a target="_blank" href="#">会员中心 </a>
        <a target="_blank" href="#">商务合作 </a>
        <a target="_blank" href="#">|</a>
    </nav>
    <!-- 第四个盒子 login -->
    <div class="login">
        <div class="login-img">
            <img src="images/login.jpg" alt="">
        </div>
        <span>* 楊 *</span>
    </div>
    <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" class="login01">登录</button>
    <div id="id01" class="modal">
        <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
        <form class="modal-content animate" action="">
            <div class="container">
                <label><b>用户名：</b></label>
                <input type="text" placeholder="请输入用户名" name="email" required>

                <label><b>密码：</b></label>
                <input type="password" placeholder="请输入密码" name="psw" required>

                <label><b>密码：</b></label>
                <input type="password" placeholder="请再次输入密码" name="psw-repeat" required>
                <input type="checkbox" checked="checked"> 保存账户？
                <div class="clearfix">
                    <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">取消</button>
                    <button type="submit" class="signupbtn" onclick="back01()">登录</button>
                </div>
            </div>
        </form>
    </div>
</header>
<!-- 导航栏 -->
<nav class="nav2">
    <div class="nav3">
        <ul class="homeNav">
            <li><a class="normal active" href="#">首页</a></li>
            <li><a class="normal" href="#">榜单</a></li>
            <li><a class="normal" href="#">下载客户端</a></li>
            <li><a class="normal" href="#">更多</a></li>
        </ul>
    </div>
    <ul class="subNav">
        <li><a target="_blank" href="#" class="iconfont icon-zhibobofangshexiangjikanyanjingdianshixianxing">直播</a></li>
        <li><a target="_blank" href="#" class="iconfont icon-shangcheng">商城</a></li>
        <li><a target="_blank" href="#" class="iconfont icon-erji">音乐人</a></li>
        <li class="kgPlayer">
            <a target="_blank" href="#" class="iconfont icon-dailishang">代理商</a>
        </li>
        <li>
            <a target="_blank" href="#" class="iconfont icon-ktv">主播电台</a>
        </li>
        <li class="openPlat">
            <a target="_blank" href="#" class="iconfont icon-kaifangpingtai">开放平台</a>
        </li>
    </ul>
</nav>
<!--轮播图-->
<section class="x0">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/20200406233800728240.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20200407114244160948.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20201210193809504789.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20201210194115813051.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20201210194608666942.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20201210194755227470.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20201210202241591681.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/20201210204216101742.jpg" alt=""></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="x1">

    </div>
</section>
<script>
    var swiper = new Swiper('.swiper-container', {
        speed: 2000,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>


<!--精选歌单，热门榜单-->
 <div class="d1">
    <div class="d2">
        <h3><span style="color: rgb(60, 132, 240);">精选</span>歌单</h3>
    </div>
    <div class="d3">
        <div class="d3-0">
        <a href="javascript:"><img src="images/20201204175146333792.jpg" alt="" width="325" height="325"></a>
            <div class="listen">
                <span class="iconfont icon-erji">6.3万</span>
            </div>
            <div class="zi">
                <p style="font-size: 14px;color: #ffffff">小声唱我们的歌，属于成长的印记</p>
                <p style="font-size: 14px;color: #cfcfcf">最好的那年</p>
                <div class="play">
                    <i class="iconfont icon-play"></i>
                </div>
            </div>
        </div>
        <div class="d3-1">
            <a href="#"><img src="images/20201120143833633161.jpg" alt="" width="160" height="160"></a>
            <div class="listen">
                <span class="iconfont icon-erji">6.3万</span>
            </div>
            <div class="iz">
                <p style="font-size: 14px;color: #ffffff">千年如一梦，历史终留名</p>
                <p style="font-size: 14px;color: #cfcfcf">简单爱</p>
                <div class="play">
                    <i class="iconfont icon-play"></i>
                </div>
            </div>
        </div>
        <div class="d3-1">
            <a href="#"><img src="images/20201207075030766670.jpg" alt="" width="160" height="160"></a>
            <div class="listen">
                <span class="iconfont icon-erji">6.3万</span>
            </div>
            <div class="iz">
                <p style="font-size: 14px;color: #ffffff">周末宅家必备：一个人也能解决无聊</p>
                <p style="font-size: 14px;color: #cfcfcf">我会梦见一只电子羊</p>
                <div class="play">
                    <i class="iconfont icon-play"></i>
                </div>
            </div>
        </div>
        <div class="d3-1">
           <a href="#"><img src="images/20201203163919492030.jpg" alt="" width="160" height="160"></a>
            <div class="listen">
                <span class="iconfont icon-erji">6.3万</span>
            </div>
            <div class="iz">
                <p style="font-size: 14px;color: #ffffff">一曲入魂，那些自带泪点的OST</p>
                <p style="font-size: 14px;color: #cfcfcf">酷狗影视小编-栗子</p>
                <div class="play">
                    <i class="iconfont icon-play"></i>
                </div>
            </div>
        </div>
        <div class="d3-1">
            <a href="javascript:"><img src="images/20201202181645641008.jpg" alt="" width="160" height="160"></a>
            <div class="listen">
                <span class="iconfont icon-erji">6.3万</span>
            </div>
            <div class="iz">
                <p style="font-size: 14px;color: #ffffff">工作解压|生活糟糕还好我可爱</p>
                <p style="font-size: 14px;color: #cfcfcf">Vivienne</p>
                <div class="play">
                    <i class="iconfont icon-play"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="d4">
        <h3><span style="color: rgb(89, 118, 245);">热门</span>榜单</h3>
    </div>
    <div class="d5">
        <ul>
            <li><div style="background-color: #f6f6f6; width: 300px;height: 98px;">
                <img src="images/04b10ec0bb3d8dfdc2b6cf0d30e0ebd3.jpg_240x240.jpg" alt="" width="98px" height="98px">
                <dl>
                    <a href="javascript:"><dt style="font-weight: 1000;font-size: 15px;">酷狗飙升榜</dt></a>
                    <a href="javascript:"><dt>1.毛不易-小王故事</dt> </a>
                    <a href=""><dd>2.于翔-写给我们的一封信</dd></a>
                </dl>
<!--                <div class="play-1">-->
<!--                    <i class="iconfont icon-play"></i>-->
<!--                </div>-->
            </div>
            </li>
            <li><div style="background-color: #f6f6f6; width: 300px;height: 98px;">
                <a href="javascript:"><img src="images\bc23a80bf7a2e9179460ed2b6e384849.jpg_240x240.jpg" alt="" width="98px" height="98px"></a>
                <dl>
                    <a href="javascript:"><dt style="font-weight: 1000;font-size: 15px;">酷狗飙升榜</dt></a>
                    <a href="javascript:"><dt>1.毛不易-小王故事</dt> </a>
                    <a href="javascript:"><dd>2.于翔-写给我们的一封信</dd></a>
                </dl>
            </div>
            <li>
                <div style="background-color: #f6f6f6; width: 300px;height: 98px;">
                    <img src="images\47e76f9757c6bbb670630b4671961759.jpg_240x240.jpg" alt="" width="98px" height="98px">
                    <dl>
                        <a href="javascript:"><dt style="font-weight: 1000;font-size: 15px;">酷狗飙升榜</dt></a>
                        <a href="javascript:"><dt>1.毛不易-小王故事</dt> </a>
                        <a href="javascript:"><dd>2.于翔-写给我们的一封信</dd></a>
                    </dl>
                </div>
            </li>
        </ul>
    </div>
</div>


<!--新歌首发，推荐MV-->
<div class="b0">
    <div class="b1">
        <div class="b1-1">
            <div class="b1-1-1">
                <h3><span style="color: rgb(60, 132, 240);">新歌</span>首发</h3>
            </div>
            <ul style="font-size: 15px;">
                <li>华语</li>
                <li>欧美</li>
                <li>韩国</li>
                <li>日本</li>
            </ul>
            <button onclick="document.getElementById('id02').style.display='block'" style="width:auto;width: 100px;height: 30px;" class="login01">全部播放</button>
<!--            <input type="button" value="全部播放" style="width: 100px;height: 30px;">-->
            <div id="id02" class="modal">
                <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
                <div class="modal-content " style="border-radius: 20px;width: 670px;height: 400px;">
                    <!--        <div class="container" style="width: 670px;height: 400px;background-color:red;margin: 0 auto;border-radius: 20px">-->
                    <!--音乐播放器-->
                    <div class="musicPlayer">
                        <!--歌曲信息-->
                        <div class="musicInfo">
                            <!--歌曲图片-->
                            <div class="musicImg" id="musicImg" >
                                <img src="images/login.jpg" id="musicpic" alt="" style="width: 200px;height: 200px;opacity: 0.8;" >
                            </div>
                            <!--歌曲图片 end-->
                            <!--歌曲名称-->
                            <div class="musicName">
                                <h1 id="sname">歌曲名称</h1>
                                <h2 id="singer">歌手</h2>
                            </div>
                            <!--歌曲名称 end-->
                        </div>
                        <!--歌曲信息 end-->

                        <!--快捷文字-->
                        <div class="kj">
                            <ul>
                                <li><i class="iconfont icon-xihuan" id="aiXin"></i> <p>喜欢</p></li>
                                <li><i class="iconfont icon-shoucang" id="shoucang"></i> <p>收藏</p></li>
                                <li><i class="iconfont icon-xiazai" id="xiazai"></i> <p>下载</p></li>
                                <li><i class="iconfont icon-fenxiang" id="fenXiang"></i> <p>分享</p></li>
                            </ul>
                        </div>

                        <!--快捷文字 end-->

                        <!--进度条-->
                        <div class="jdt">
                            <span class="jdt-left time" id="jdtLeft">00:00</span>
                            <span class="jdt-right time" id="jdtRight">00:00</span>
                            <div class="clears"></div>

                            <div class="jdt_1" id="gequJDBar">
                                <div class="jdt_color" id="gequjd">
                                </div>
                            </div>
                            <!--进度条 end-->
                            <!--控制按钮-->
                            <div class="ctrls" id="ctrls">
                                <button class="preBtn" id="preBtn" type="button"><i class="iconfont icon-icon_gequxiangqing_x1"></i></button>
                                <button class="playBtn" id="playBtn" type="button"><i class="iconfont icon-kaishi"></i></button>
                                <button class="nextBtn" id="nextBtn" type="button"><i class="iconfont icon-icon_gequxiangqing_x"></i></button>
                                <!--音量控制-->
                                <div class="vol" id="volJd">
                                    <i class="iconfont icon-volume"></i>
                                    <div class="vol_color" id="volColor"></div>
                                    <div class="vol_blok" id="volBlok"></div>
                                </div>
                                <button class="iconfont icon-gengduo" style="margin-left: 200px" onclick="document.getElementById('id03').style.display='block'"></button>
                                <div id="id03" class="modal1">
                                    <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>

                                </div>
                                <!--音量控制 end-->
                                <!--音量显示百分比-->
                                <!--<div class="text" id="text">
                                    100%
                                </div>-->
                                <!--音量显示百分比  end-->
                            </div>
                            <!--控制按钮 end-->
                        </div>

                        <audio src="#" id="music"></audio>
                    </div>
                    <!--音乐播放器 end-->
                    <script src="js/music.js"></script>
                </div>
                <!--    </div>-->
            </div>
        </div>
        <hr>
        <div class="b1-2">
            <ul class="b1-2-1">
                <a href="javascript:"><li><span>单依纯-好久不见</span></li> </a>
                <a href="javascript:"><li><span>单依纯-星·Sailing</span></li> </a>
                <a href="javascript:"><li><span>单依纯-城市之光</span></li> </a>
                <a href="javascript:"><li><span>单依纯-灿烂的你</span></li> </a>
                <a href="javascript:"><li><span>单依纯-给电影人的情书</span></li> </a>
                <a href="javascript:"><li><span>单依纯-永不失联的爱</span></li> </a>
                <a href="javascript:"><li><span>单依纯-像风一样</span></li> </a>
                <a href="javascript:"><li><span>单依纯-Forever Young</span></li> </a>
            </ul>
        </div>
    </div>
    <div class="b2">
        <div class="b1-1-1">
            <h3><span style="color: rgb(89, 118, 245);">热门</span>榜单</h3>
        </div>
    </div>
    <div class="b3">
        <img src="images/20201211171334984719.jpg" alt="" style="width: 320px;height: 175px;">
        <img src="images/20201210111643927953.jpg" alt="" style="width: 154px;height: 84px;">
        <img src="images/20201209101205214787.jpg" alt="" style="width: 154px;height: 84px;float: right;margin-right: 12px;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>晴雅集</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>你的珍藏</p>
    </div>
</div>

<!--热门电台-->
<div class="c0">
    <div class="c0-1">
        <div class="c0-1-1">
            <h3><span style="color: rgb(89, 118, 245);">热门</span>电台</h3>
        </div>
    </div>
    <div class="c0-2">
        <ul>
            <li>
                <a href="#">
                    <!-- 图片的盒子 -->
                    <div class="img-box">
                        <img src="images\radio_1.jpg" alt="">

                        <div class="play">
                            <i class="iconfont icon-iconset0481"></i>
                        </div>
                    </div>
                    <!-- 标题部分 -->
                    <h3>moonlight</h3>
                </a>
            </li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_2.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_3.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_4.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_5.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_5.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_4.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images/radio_3.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images/radio_2.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
            <li><a href="#">
                <!-- 图片的盒子 -->
                <div class="img-box">
                    <img src="images\radio_1.jpg" alt="">

                    <div class="play">
                        <i class="iconfont icon-iconset0481"></i>
                    </div>
                </div>
                <!-- 标题部分 -->
                <h3>moonlight</h3>
            </a></li>
        </ul>
    </div>
    <div class="c0-3">
        <div class="c0-3-1">
            <h3><span style="color: rgb(89, 118, 245);">热门</span>歌手
            </h3>
        </div>
        <div class="c0-3-2">
            <ul>
                <li>华语</li>
                <li>欧美</li>
                <li>日韩</li>
                <li style="font-weight: 100;">更多</li>
            </ul>
        </div>
    </div>
    <div class="c0-4">
        <a href="javascript:"><img src="images\20180515002522714.jpg" alt="" style="width: 160px;height: 160px;"></a>
        <a href="javascript:"><img src="images/20191015184509781761.jpg" alt="" style="width: 160px;height: 160px;"></a>
        <a href="javascript:"><img src="images/login.jpg" alt="" style="width: 105px;height: 105px;"></a>
        <a href="javascript:"><img src="images/login.jpg" alt="" style="width: 105px;height: 105px;"></a>
        <a href="javascript:"><img src="images/login.jpg" alt="" style="width: 105px;height: 105px;"></a>
    </div>
</div>

<!--友情链接-->
<div class="friendLink">
    <div class="itemTitle">
        <h3><b style="color: aqua;">友情</b>链接</h3>
    </div>
    <div class="itemContent">
        <a target="_blank" href="javascript:" title="爱美网">爱美网</a>
        <a target="_blank" href="javascript:" title="汽车论坛">汽车论坛</a>
        <a target="_blank" href="javascript:" title="IT之家">IT之家</a>
        <a target="_blank" href="javascript:" title="iPhone游戏">iPhone游戏</a>
        <a target="_blank" href="javascript:" title="旅游攻略">旅游攻略</a>
        <a target="_blank" href="javascript:" title="华为商城">华为商城</a>
        <a target="_blank" href="javascript:" title="365音乐网">365音乐网</a>
        <a target="_blank" href="javascript:" title="软件下载">软件下载</a>
        <a target="_blank" href="javascript:" title="漫漫看漫画">漫漫看漫画</a>
        <a target="_blank" href="javascript:" title="手机游戏">手机游戏</a>
        <a target="_blank" href="javascript:" title="5sing原创音乐">5sing原创音乐</a>
        <a target="_blank" href="javascript:" title="腾讯音乐人">腾讯音乐人</a>
        <a target="_blank" href="javascript:" title="豌豆荚">豌豆荚</a>
        <a target="_blank" href="javascript:" title="5sing众筹">5sing众筹</a>
        <a target="_blank" href="javascript:" title="智能电视网">智能电视网</a>
        <a target="_blank" href="javascript:" title="北京快网">北京快网</a>
        <a target="_blank" href="javascript:" title="07073网页游戏">07073网页游戏</a>
        <a target="_blank" href="javascript:" title="站长之家">站长之家</a>
    </div>
</div>

<!--底部栏-->
<footer>
    <div class="footer">
        <div class="links">
            <a  href="javascript:" target="_blank">关于酷狗</a>|
            <a  href="javascript:" id="report">监督举报</a> |
            <a  href="javascript:" target="_blank">商务合作</a> |
            <a  href="javascript:" target="_blank">广告服务</a> |
            <a  href="javascript:">投诉指引</a> |
            <a  href="javascript:">隐私政策</a> |
            <a  href="javascript:">儿童隐私政策</a> |
            <a  href="javascript:">用户服务协议</a> |
            <a  href="javascript:">酷狗音乐人</a> |
            <a  href="javascript:">酷狗直通车</a> |
            <a  href="javascript:" target="_blank">招聘信息</a> |
            <a  href="javascript:" target="_blank">客服中心</a> |
            <a  href="javascript:" target="_blank">用户体验提升计划</a>
        </div>
        <hr>
        <div class="copyright">
            <p >我们致力于推动网络正版音乐发展，相关版权合作请联系copyrights@kugou.com</p>
            <p>信息网络传播视听节目许可证 1910564 增值电信业务经营许可证粤B2-20060339 &nbsp;&nbsp;&nbsp;
                <a  target="_blank" href="#" style="color: white;">粤ICP备09017694号</a>
                <span class="footerIcon"><a target="_blank" href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a></span>
            </p>
            <p>广播电视节目制作经营许可证（粤）字第01270号&nbsp;&nbsp;&nbsp;&nbsp;营业性演出许可证穗天演440106026&nbsp;&nbsp;&nbsp;
                <a  target="_blank" href="#" style="color: white;">营业执照</a></p>
            <p>穗公网监备案证第44010650010167&nbsp;&nbsp;&nbsp;&nbsp;互联网药品信息服务资格证编号（粤）-非经营性-2012-0018
                <a style="" target="_blank" href="#">&nbsp;&nbsp;&nbsp;
                    <span style="color: white;">粤公网安备 44010602000141号</span><img style="vertical-align: text-bottom;" }="" src="images\icon_yuewangga1.png" width="16" height="16" alt=""></a></p>
            <p>
                <a target="_blank" href="#" style="color: white;">互联网不良信息举报中心：www.12377.cn</a>
                &nbsp;&nbsp;&nbsp;&nbsp;酷狗不良信息举报邮箱：jubao_music@kugou.net&nbsp;&nbsp;&nbsp;&nbsp;客服邮箱：kefu@kugou.net</p>
            <p>Copyright&nbsp;&nbsp;©&nbsp;&nbsp;2004-2020 KuGou-Inc.All Rights Reserved
            </p>
            <p style="color: aqua;">班级：18软件工程3班&nbsp;&nbsp;&nbsp;学号：2018110139&nbsp;&nbsp;&nbsp;姓名：杨春</p>
        </div>
    </div>
</footer>
</body>
</html>